<template>
  <transition name="menu">
    <div v-show="visible" class="menu">
      <div class="menu-item" @click="goto('Home')">首页</div>
      <div class="menu-item" @click="goto('TypeManager')">类型管理</div>
      <div class="menu-item" @click="goto('DataViews')">数据图表</div>
      <div class="menu-item" @click="goto('DataIO')">数据备份</div>
      <div class="menu-item" @click="goto('HelloWorld')">帮助</div>
    </div>
  </transition>
  <transition name="modal">
    <div v-show="visible" class="modal" @click="close"></div>
  </transition>
</template>

<script lang="ts">
import { useRouter, useRoute } from "vue-router";
export default {
  name: "Menu",
  props: {
    visible: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  setup(props, context) {
    function close() {
      context.emit("update:visible", false);
    }

    const router = useRouter();
    // const route = useRoute();
    function goto(name: string) {
      router.push({ name: name });
      context.emit("update:visible", false);
    }

    return {
      close,
      goto,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../util/util.scss";

.menu {
  position: fixed;
  height: 100vh;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  width: 30vw;
  z-index: 999;
  top: 0;
  .menu-item {
    display: block;
    width: 100%;
    height: pxW(120);
    line-height: pxW(120);
    text-align: center;
    margin: 0 auto;
    &:active {
      background-color: rgb(233, 233, 235);
    }
  }
}
.modal {
  z-index: 998;
  top: 0;
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-enter-active,
.modal-leave-active {
  transition: all 0.4s ease-out;
}
.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.menu-enter-active,
.menu-leave-active {
  transition: all 0.4s ease-out;
}
.menu-enter-from,
.menu-leave-to {
  transform: translateX(-30vw);
}
</style>